<script setup>
import { ref } from 'vue'
import { CScrollbar } from 'c-scrollbar'

const props = defineProps({
  children: {
    type: Array,
    default: []
  },
  showed: {
    type: Boolean,
    default: false
  },
  kind: {
    type: Number,
    default: 1
  }
})

const emits = defineEmits(['setValue'])

const setValue = (item) => {
  emits('setValue', item, props.kind)
}
const hasChild = ref(false)
const curCas = ref(null)
const showCascader = (item) => {
  curCas.value = item
  if(item.children && item.children.length>0) {
    hasChild.value = true
  } else {
    curCas.value = null
    hasChild.value = false
  }
}
</script>

<template>
  <div class="cas-a">
    <div v-show="showed">
      <div class="cas-b">
        <c-scrollbar>
          <div v-for="cur in children" :key="cur.selId" class="cas-c" @click="setValue(cur)" @mouseover="showCascader(cur)">{{cur.selName}}[{{cur.selCode}}]</div>
        </c-scrollbar>
      </div>
    </div>
    <div v-if="hasChild">
      <ubt-cascader :children="curCas.children" :showed="showed" :kind="kind" @setValue="setValue"></ubt-cascader>
    </div>
  </div>
</template>

<style scoped>
.cas-a {position: absolute; margin-left: 230px; margin-top: -200px;}
.cas-b {width: 230px; height: 200px; overflow: hidden; background-color: #FFF; box-shadow: 1px 1px 1px #CCC; border-left: 1px solid #F2F6FC;}
.cas-c {height: 40px; line-height: 40px; padding: 0 20px; border-bottom: 1px solid #F2F6FC; cursor: pointer;}
.cas-c:hover {background-color: #E9EEF2;}
</style>
